<template>
  <view class="container">
    <!-- 固定的顶部区域 -->
    <view class="fixed-top">
      <status-bar bgColor="#0088ff"></status-bar>
      <!-- 顶部标题栏 -->
      <view class="nav-bar">
        <view class="back-btn" @click="goBack">
          <image src="/static/images/icon/backward_flat.png" class="back-icon-img"></image>
        </view>
        <view class="nav-title">选择窗户类型</view>
      </view>
    </view>

    <!-- 可滚动的内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 提示文字 -->
      <view class="tip-text">选对窗型,看清要求,做好填空和选择.</view>
      
      <!-- 窗户类型网格 -->
      <view class="window-grid">
        <view 
          v-for="(item, index) in windowTypeList" 
          :key="index"
          class="window-item"
          @click="selectWindowType(item)"
          hover-class="window-item-hover"
        >
          <image 
            :src="item.icon" 
            class="window-icon"
            mode="aspectFit"
          ></image>
          <text class="window-name">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowTypeList: [
        { value: 'ordinary', name: '普通窗', icon: '/static/window-icons/ordinary.png' },
        { value: 'floor', name: '落地窗', icon: '/static/window-icons/floor.png' },
        { value: 'bay', name: '飘窗', icon: '/static/window-icons/bay.png' },
        { value: 'arch', name: '拱形窗', icon: '/static/window-icons/arch.png' },
        { value: 'floorArch', name: '落地拱形窗', icon: '/static/window-icons/floor-arch.png' },
        { value: 'uShape', name: 'U形窗', icon: '/static/window-icons/u-shape.png' },
        { value: 'lLeft', name: '左L形窗', icon: '/static/window-icons/l-left.png' },
        { value: 'lRight', name: '右L形窗', icon: '/static/window-icons/l-right.png' },
        { value: 'special', name: '异形窗', icon: '/static/window-icons/special.png' }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectWindowType(item) {
      // 发送选中的窗户类型到上一个页面
      uni.$emit('SELECT_WINDOW_TYPE', item);
      // 返回上一页
      uni.navigateBack({ delta: 1 });
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 固定顶部区域 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
}

/* 内容区域 */
.content {
  margin-top: 140rpx; /* 状态栏+导航栏高度 */
}

/* 提示文字 */
.tip-text {
  font-size: 32rpx;
  color: #ff0000;
  text-align: left;
  padding: 30rpx 30rpx;
  /* line-height: 1.5; */
  font-weight: bold;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;
}

/* 窗户类型网格 */
.window-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 10rpx 10rpx;
  justify-content: space-between;
}

.window-item {
  width: calc(33.33% - 20rpx);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease;
  padding: 10rpx 0;
  margin: 10rpx;
}

.window-item-hover {
  transform: scale(0.98);
  background-color: #f9f9f9;
}

.window-icon {
  width: 100%;
  height: 140rpx;
  margin-bottom: 5rpx;
  background-color: #f5f5f5;
  padding: 15rpx;
  box-sizing: border-box;
}

.window-name {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  line-height: 1.4;
}


</style>